<template>
  <div id="page-num-plate">
    <h2>{{ activity.act_name }} - 号码牌管理</h2>
    <card>
      <Input v-model="query.realName" placeholder="请输入姓名" style="width: 200px"></Input>
      <Select v-model="query.pkActGroup" style="width: 150px" placeholder="请选择组别">
        <Option :value="''" :key="''" selected>全部组别</Option>
        <Option
          v-for="item in actGroupList"
          :key="item.pk_act_group"
          :value="item.pk_act_group">{{ item.group_name }}</Option>
      </Select>
      <Button type="primary" class="mr10" @click="search()">查询</Button>
    </card>
    <card class="mt10">
      <div class="m10 clearfix">
        <download-btn :download="`${apiUrl}/gxActivityNumplate/exportNumplateExcel`" :query="this.export">
          <Button type="info" class="fl mr10">导出名单</Button>
        </download-btn>
        <Upload
          :action="`${apiUrl}/gxActivityNumplate/importNumplateExcel`"
          :show-upload-list="false"
          :accept="'.xlsx,.xls'"
          :on-progress="onImportProgress"
          :on-success="onImportSuccess"
          class="fl mr10">
          <Button type="info" :loading="importing">导入号码牌</Button>
        </Upload>
        <Button type="info" class="fl">消息推送</Button>
      </div>

      <Table
        :columns="columns"
        :data="list"
        :loading="loading"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </card>
  </div>
</template>

<script>
  import { apiUrl } from '@/config'
  import moment from 'moment'
  import activityApi from '@/api/activity'
  import downloadBtn from '@/components/download-btn'

  export default {
    name: 'page-num-plate',
    props: [
      'activity'
    ],
    components: {
      downloadBtn
    },
    data () {
      let activityId = this.$route.params.activityId
      return {
        apiUrl,
        loading: false,
        importing: false,
        export: {
          pkActBaseInfo: activityId
        },
        query: {
          pkActBaseInfo: activityId,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '姓名',
            key: 'realName',
            width: 80
          },
          {
            title: '性别',
            key: 'sexName',
            width: 50
          },
          {
            title: '手机号',
            width: 120,
            key: 'mobile'
          },
          {
            title: '报名组别',
            key: 'pkActGroupName'
          },
          {
            title: '俱乐部',
            key: 'pkRclubInfoName'
          },
          {
            title: '组队名称',
            key: 'teamName'
          },
          {
            title: '队长',
            width: 50,
            key: 'captainName',
            render: (h, params) => {
              let { row } = params
              return row.captainName === 0 ? '是' : '否'
            }
          },
          {
            title: '报名时间',
            width: 180,
            render: (h, params) => {
              let { row } = params
              return moment(row.signUpTime).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '号码牌',
            width: 100,
            key: 'numPlate'
          }
        ],
        list: []
      }
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      onImportProgress () {
        this.importing = true
      },
      onImportSuccess (response, file, fileList) {
        if (this.$apiHelper.requestSuccessed(response.responseCode)) {
          this.importing = false
          this.$Message.info('导入成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: response.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      search () {
        this.query.currentPage = 1
        this.getList()
      },
      async getList () {
        this.loading = true
        const { body } = await activityApi.ridePackage.list(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      async getActGroupList () {
        this.loading = true
        const { body } = await activityApi.group.listNoPage({
          pk_act_base_info: this.$route.params.activityId
        })
        const { responseData } = body
        this.loading = false
        this.actGroupList = responseData
      }
    },
    mounted () {
      this.getList()
      this.getActGroupList()
    }
  }
</script>
